<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>立方体照片</title>
    <style type="text/css">
          *{
              margin: 0;padding: 0;
          }
          body{background:#ccc;}
          .box{
              margin: 200px  auto;
              /*perspective规定3D元素的透视效果*/
              perspective: 1000px;
              -webkit-perspective: 1000px;
              -moz-perspective: 1000px;
              -ms-perspective: 1000px;
          }
          .x{
              transform-style: preserve-3d; /*子元素保留3D效果*/
              transform: rotateX(-30deg);
          }
          .y{
              transform-style: preserve-3d;
              transform: rotateY(10deg);
          }
          .y div{
              position: absolute;
              width: 235px;
              height: 235px;
              left: 300px;
              opacity: 0.75;
              border-radius: 15px;
              transition:all .3s linear;
          }
          .y div#i1 {
              transform: rotateY(0deg) translateZ(200px);
          }
          .y div#i2 {
              transform: rotateY(60deg) translateZ(200px);
          }
          .y div#i3 {
              transform: rotateY(120deg) translateZ(200px);
          }
          .y div#i4 {
              transform: rotateY(180deg) translateZ(200px);
          }
          .y div#i5 {
              transform: rotateY(240deg) translateZ(200px);
          }
          .y div#i6 {
              transform: rotateY(300deg) translateZ(200px);
          }
          .y div img {
              height:235px;
              width:235px;
              border-radius: 15px;
              transition:all .3s linear;
          }
          .y div:hover {
              opacity: 1;
          }
          .y div:hover  img{
              height:340px;
              width:340px;
              margin-left:-50px;
              margin-top:-50px;
          }



    </style>
</head>
<body>
<div class="box">
    <div class="x">
        <div class="y">
            <div id="i1">
                <img src="img/1.jpg" />
            </div>
            <div id="i2">
                <img src="img/2.jpg" />
            </div>
            <div id="i3">
                <img src="img/3.jpg" />
            </div>
            <div id="i4">
                <img src="img/4.jpg" />
            </div>
            <div id="i5">
                <img src="img/5.jpg" />
            </div>
            <div id="i6">
                <img src="img/6.jpg" />
            </div>
        </div>
    </div>
</div>
</body>
</html>